<template>
  <view class="reminderSettings wh_750 pageHeight flex flex-column align-center bg_F5F5F5">
    <s-header-title ref="headerTitle" isDisplayBack title="生日/纪念日提醒设置" is-fixed background="#FFFFFF"
                  @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <!--    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(1)">-->
    <!--      <view class="personalData_avatar flex align-center justify-between">-->
    <!--        <text class="personalData_avatar_text">-->
    <!--          当天提醒-->
    <!--        </text>-->
    <!--        <su-switch v-model="reminderSettings.same_day"-->
    <!--                   size="40"-->
    <!--                   style="margin-right: 27rpx;"-->
    <!--                   :bg="'bg_FF4206'"-->
    <!--        ></su-switch>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <!--    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(2)">-->
    <!--      <view class="personalData_avatar flex align-center justify-between">-->
    <!--        <text class="personalData_avatar_text">-->
    <!--          提前1天-->
    <!--        </text>-->
    <!--        <su-switch v-model="reminderSettings.bf_day"-->
    <!--                   size="40"-->
    <!--                   style="margin-right: 27rpx;"-->
    <!--                   :bg="'bg_FF4206'"-->
    <!--        ></su-switch>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <!--    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(3)">-->
    <!--      <view class="personalData_avatar flex align-center justify-between">-->
    <!--        <text class="personalData_avatar_text">-->
    <!--          提前3天-->
    <!--        </text>-->
    <!--        <su-switch v-model="reminderSettings.three_day"-->
    <!--                   size="40"-->
    <!--                   style="margin-right: 27rpx;"-->
    <!--                   :bg="'bg_FF4206'"-->
    <!--        ></su-switch>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <!--    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(4)">-->
    <!--      <view class="personalData_avatar flex align-center justify-between">-->
    <!--        <text class="personalData_avatar_text">-->
    <!--          提前7天-->
    <!--        </text>-->
    <!--        <su-switch v-model="reminderSettings.seven_day"-->
    <!--                   size="40"-->
    <!--                   style="margin-right: 27rpx;"-->
    <!--                   :bg="'bg_FF4206'"-->
    <!--        ></su-switch>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <!--    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(5)">-->
    <!--      <view class="personalData_avatar flex align-center justify-between">-->
    <!--        <text class="personalData_avatar_text">-->
    <!--          提前15天-->
    <!--        </text>-->
    <!--        <su-switch v-model="reminderSettings.fifteen_day"-->
    <!--                   size="40"-->
    <!--                   style="margin-right: 27rpx;"-->
    <!--                   :bg="'bg_FF4206'"-->
    <!--        ></su-switch>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <!--    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(6)">-->
    <!--      <view class="personalData_avatar flex align-center justify-between">-->
    <!--        <text class="personalData_avatar_text">-->
    <!--          提前30天-->
    <!--        </text>-->
    <!--        <su-switch v-model="reminderSettings.thirty_day"-->
    <!--                   size="40"-->
    <!--                   style="margin-right: 27rpx;"-->
    <!--                   :bg="'bg_FF4206'"-->
    <!--        ></su-switch>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <!--    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(7)">-->
    <!--      <view class="personalData_avatar flex align-center justify-between">-->
    <!--        <text class="personalData_avatar_text">-->
    <!--          不提醒-->
    <!--        </text>-->
    <!--        <su-switch v-model="reminderSettings.remind"-->
    <!--                   size="40"-->
    <!--                   style="margin-right: 27rpx;"-->
    <!--                   :bg="'bg_FF4206'"-->
    <!--        ></su-switch>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <single-gap margin="25rpx 0 0 0"
                v-for="(item,index) in pageOption.reminderSettings"
                :key="index"
                :is-show-title="false"
    >
      <view class="personalData_avatar flex align-center justify-between">
        <text class="personalData_avatar_text">
          {{ item.notice.name }}
        </text>
        <text class="personalData_avatar_tips" v-if="!!item.notice.description">
          {{ item.notice.description }}
        </text>
        <su-switch v-model="item.is_open"
                   size="40"
                   style="margin-right: 27rpx;"
                   :bg="'bg_FF4206'"
                   @change="setReminders($event,item)"
        ></su-switch>
      </view>
    </single-gap>
    <!--    <view class="reminderSettings_bottom allRowCenter mt-54" @click.stop="confirmReminders">-->
    <!--      <text class="reminderSettings_bottom_tips">确定</text>-->
    <!--    </view>-->
  </view>
</template>

<script setup>
  import SingleGap from '@/pages/familyPage/components/singleGap.vue';
  import HeaderTitle from '@/pages/familyPage/components/headerTitle.vue';
  import { reactive, watch } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const page = reactive({
    headerHeight: 0,
    options: {},
  });
  const pageOption = reactive({
    reminderSettings: [],
  });

  onLoad((options) => {
    page.options = options;
    getReminders();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  // 获取生日纪念日配置
  async function getReminders() {
    const { data } = await sheep.$api.family.getFamilyRemindList({
      member_id: page.options.member_id,
    });
    data.forEach(item => {
      item.is_open = item.is_open == 1;
    });
    pageOption.reminderSettings = data;
  }

  // 设置提醒
  async function setReminders(e, item = {}) {
    const { data } = await sheep.$api.family.setFamilyRemind({
      member_id: page.options.member_id,
      id: item.notice_id,
      is_open: !!e ? 1 : 0,
    });
    await getReminders();
  }
</script>


<style scoped lang="scss">
  .reminderSettings {

    .personalData_avatar {
      .personalData_avatar_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }

      .personalData_avatar_tips {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }

      .personalData_avatar_icon {
        width: 26rpx;
        height: 26rpx;
        border-radius: 13rpx 13rpx 13rpx 13rpx;
        border: 2rpx solid #707070;
      }

      .personalData_avatar_iconSelect {
        width: 26rpx;
        height: 26rpx;
        border-radius: 13rpx 13rpx 13rpx 13rpx;
        border: 6rpx solid #FF4206;
      }
    }

    .reminderSettings_bottom {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 57rpx 57rpx 57rpx 57rpx;

      .reminderSettings_bottom_tips {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
